<template>
    <div class="BookmarkClass">
        <a-layout>
            <a-layout-header class="header">
            <div class="logo" />
            <a-menu
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
            >
                <a-menu-item><router-link to="/">首页</router-link></a-menu-item>
                <a-menu-item><router-link to="/login">切换账号</router-link></a-menu-item>
                <a-menu-item><router-link to="/register">注册</router-link></a-menu-item>
            </a-menu>
            </a-layout-header>
            <a-layout>
            <a-layout-sider width="200" style="background: #fff">
                <a-menu
                mode="inline"
                :style="{ height: '100%', borderRight: 0 }"
                v-model:selectedKeys="selectedKeys"
                v-model:openKeys="openKeys"
                >
                    <template v-for="item in bookmarkData" :key="item.path">
                        <a-sub-menu>
                            <template #title>
                            <span>
                                {{item.meta.title}}
                            </span>
                            </template>
                            <a-menu-item v-for="itemChildren in item.children" :key="itemChildren.path" @click="routerTo(itemChildren.name)">
                            {{itemChildren.meta.title}}
                            </a-menu-item>
                        </a-sub-menu>
                    </template>
                
                    <a-menu-item>日志管理</a-menu-item>

                </a-menu>
            </a-layout-sider>
            <a-layout :style="{padding:'0 24px 24px',minHeight:'91vh'}">
                <a-breadcrumb style="margin: 16px 0">
                <template v-for="item in breadcrumb" :key="item.path">
                    <a-breadcrumb-item>{{ item.meta.title }}</a-breadcrumb-item>
                </template>
                </a-breadcrumb>
                <a-layout-content
                :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
                >
                <router-view />
                </a-layout-content>
            </a-layout>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
import bookmarkClass from '@/pages/index/router/bookmarkClass'
import isLogin from '@/hooks/isLogin'
import { reactive,computed,ref } from "vue"; 
import { useStore } from 'vuex';
import { useRouter,useRoute } from 'vue-router';
export default {
    name:'BookmarkClass',
    setup() {
        isLogin();
        const store = useStore();
        const router = useRouter();
        const route = useRoute();
        let selectedKeys = ref(['bookmarkclass-getall']);
        let openKeys = ref(['/bookmarkclass'])
        let bookmarkData = reactive([bookmarkClass]);
        let breadcrumb = computed(()=>{
            return route.matched
        })    

        const routerTo = param => {
            if(typeof param === 'string') router.push({name:param})
            else router.push()
        };
        
        if(!store.state.bookmarkClass.bookmarkList.length)
            store.dispatch('bookmarkClass/asyncGetBookmarkList')

        return {
            bookmarkData,routerTo,selectedKeys,openKeys,breadcrumb
        }
    }
}
</script>

<style lang="scss" scoped>
.BookmarkClass{ 
    height:100vh;
}

</style>